<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网址抓取校验功能</title>
		<style>
			body {
				font-family: Arial, sans-serif;
				margin: 0;
			}

			h1 {
				margin: 20px 0;
				text-align: center;
				font-size: 28px;
			}

			.container {
				max-width: 800px;
				margin: 0 auto;
				padding: 20px;
			}

			.form-group {
				display: flex;
				align-items: center;
				margin-bottom: 10px;
			}

			.form-group label {
				display: inline-block;
				width: 120px;
				margin-right: 20px;
			}

			.form-group input[type="text"],
			.form-group input[type="file"] {
				flex: 1;
				margin-right: 10px;
			}

			.form-group button {
				background-color: #4CAF50;
				border: none;
				color: white;
				padding: 10px;
				text-align: center;
				text-decoration: none;
				display: inline-block;
				font-size: 16px;
				margin-left: auto;
				cursor: pointer;
			}

			table {
				border-collapse: collapse;
				width: 100%;
			}

			th,
			td {
				text-align: left;
				padding: 8px;
			}

			th {
				background-color: #4CAF50;
				color: white;
			}

			tr:nth-child(even) {
				background-color: #f2f2f2;
			}

			tr:hover {
				background-color: #ddd;
			}

			.btn-action {
				background-color: #4CAF50;
				border: none;
				color: white;
				padding: 10px;
				text-align: center;
				text-decoration: none;
				display: inline-block;
				font-size: 16px;
				margin-top: 20px;
				cursor: pointer;
			}

			.btn-action:hover {
				background-color: #3e8e41;
			}

			.btn-open-all {
				background-color: #008CBA;
				border: none;
				color: white;
				padding: 10px;
				text-align: center;
				text-decoration: none;
				display: inline-block;
				font-size: 16px;
				margin-top: 20px;
				cursor: pointer;
			}

			.btn-open-all:hover {
				background-color: #005f6b;
			}
		</style>
	</head>
	<body>
		<h1>网址抓取校验功能</h1>
		<div class="container">
			<form id="form">
				<div class="form-group">
					<label for="url">输入网址：</label>
					<input type="text" id="url" name="url" placeholder="请输入网址">
					<button type="submit">抓取</button>
				</div>
				<div class="form-group">
					<label for="file">上传文件：</label>
					<input type="file" id="file" name="file">
					<button type="submit">抓取</button>
				</div>
			</form>
			<table id="table">
				<thead>
					<tr>
						<th>序号</th>
						<th>链接地址</th>
						<th>是否可用</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
			<button id="btn-action" class="btn-action">校验链接</button>
			<button id="btn-open-all" class="btn-open-all" disabled>一键打开</button>
		</div>
		<script>
			// 获取相关的 DOM 元素
			const form = document.getElementById('form');
			const table = document.getElementById('table');
			const btnAction = document.getElementById('btn-action');
			const btnOpenAll = document.getElementById('btn-open-all');

			// 监听表单提交事件
			form.addEventListener('submit', e => {
				e.preventDefault(); // 阻止默认提交行为

				// 获取表单数据
				const formData = new FormData(form);

				// 抓取网址，保存到数组中
				const urls = [];
				if (formData.get('url')) {
					// 如果输入框中有网址，则抓取该网页中的链接并加入数组中
					const url = formData.get('url').trim();
					if (isValidUrl(url) && isQualifiedUrl(url)) {
						fetchData([url]).then(data => {
							const links = extractLinks(data);
							for (const link of links) {
								if (isValidUrl(link) && isQualifiedUrl(link) && !urls.includes(link)) {
									urls.push(link);
								}
							}
						});
					}
				} else if (formData.get('file')) {
					// 如果上传文件中有网址，则加入数组中
					const file = formData.get('file');
					const reader = new FileReader();
					reader.onload = () => {
						const text = reader.result;
						const lines = text.trim().split('\n');
						for (let i = 0; i < lines.length; i++) {
							const url = lines[i].trim();
							if (isValidUrl(url) && isQualifiedUrl(url) && !urls.includes(url)) {
								urls.push(url);
							}
						}
					};
					reader.readAsText(file);
				}

				console.log('待校验链接列表', urls); // 输出日志

				fetchData(urls); // 调用函数获取数据
			});
			
			async function fetchData(urls) {
			  const responses = await Promise.all(urls.map(url => fetch(url)));
			  const data = await Promise.all(responses.map(response => response.text()));
			  return data;
			}

			/**
			 * 从 HTML 文本中提取链接
			 * @param {string} html HTML 文本
			 */
			function extractLinks(html) {
				const pattern = /href=["']([^"']+)["']/g;
				const links = [];
				let match;
				while ((match = pattern.exec(html)) !== null) {
					links.push(match[1]);
				}
				return links;
			}

			/**
			 * 判断 URL 是否符合要求
			 * @param {string} url 待判断的 URL
			 */
			function isQualifiedUrl(url) {
				const requiredKeywords = ['chat', 'gpt', 'ai'];
				const forbiddenKeywords = ['github'];
				for (const keyword of requiredKeywords) {
					if (url.includes(keyword)) {
						for (const forbidden of forbiddenKeywords) {
							if (url.includes(forbidden)) {
								return false;
							}
						}
						return true;
					}
				}
				return false;
			}

			/**
			 * 判断 URL 是否合法
			 * @param {string} url 待判断的 URL
			 */
			function isValidUrl(url) {
				const pattern = /^(https?):\/\/\S+$/i;
				return pattern.test(url);
			}


			// 监听操作按钮点击事件
			btnAction.addEventListener('click', () => {
				console.log('操作按钮点击'); // 输出日志
				validateLinks(); // 校验链接可用性
			});

			// 监听一键打开按钮点击事件
			btnOpenAll.addEventListener('click', () => {
				console.log('一键打开按钮点击'); // 输出日志
				openAllLinks(); // 打开所有链接
			});

			/**
			 * 从后端获取数据，并更新表格
			 * @param {FormData} formData 表单数据
			 */
			function fetchData(formData) {
				// TODO: 编写代码获取数据并渲染到表格中
				console.log(formData);

				// 模拟获取数据成功后启用一键打开按钮
				btnOpenAll.disabled = false;
			}

			/**
			 * 校验链接的可用性，并按照结果排序
			 */
			function validateLinks() {
				// TODO: 编写代码校验链接并按照是否可用排序
			}

			/**
			 * 打开所有链接
			 */
			function openAllLinks() {
				// TODO: 编写代码打开所有链接
			}
		</script>
	</body>
</html>